<template>
  <div class="app-container">

    <el-button type="primary" @click="openCheckForm" style="margin-bottom: 10px"
      >添加考核项</el-button
    >
    <el-table
      border
      style="width: 100%"
      :data="formList"
      show-summary
      :span-method="verticalMerger"
    >
      <el-table-column
        prop="fieldName"
        label="考核项名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="score"
        label="分值"
        align="center"
      ></el-table-column>
      <el-table-column prop="descs" label="考核内容描述"></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.userId !== 44"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleOptUpdate(scope.row)"
            >修改</el-button
          >
          <!-- <el-button
            v-if="scope.row.userId !== 44"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleOptDelete(scope.row)"
            v-hasPermi="['companyService:supplier:query']"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      width="520px"
      :title="optMap[dialogStatus]"
      :visible.sync="innerVisible"
      append-to-body
    >
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="formRules"
        label-width="110px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="考核项名称" prop="fieldName">
              <el-input v-model="addForm.fieldName" type="text" autosize />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="考核具体内容"
              prop="descs"
              :show-overflow-tooltip="true"
            >
              <el-input v-model="addForm.descs" type="textarea" autosize />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分值" prop="score">
              <el-input-number v-model="addForm.score" :min="1" :max="100000" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormOpt">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      textMap: {
        update: "修改",
        create: "发布",
      },
      optMap: {
        update: "修改",
        create: "添加",
      },
      innerVisible: false,
      formList: [
        { fieldName: "企业考核", score: 10, descs: "企业考核描述1" },
        { fieldName: "企业考核", score: 20, descs: "企业考核描述2" },
      ],
      addForm: {
        fieldName: undefined,
        descs: undefined,
        score: undefined,
      },
    };
  },
  created() {},
  methods: {
    /**
     * 封装--合并单元格--合并列
     * 本方法参数参照
     */
    verticalMerger({ row, column, rowIndex, columnIndex }) {
      if (row[column.property]) {
        // 空值不合并
        if (columnIndex == 0) {
          // 合并第一列
          return this.whetherVertical(
            column.property,
            row[column.property],
            rowIndex
          );
        }
      }
    },
    /**
     * 调用--获取合并列个数
     * @param {String} key 当前单元格key
     * @param {String} value 当前单元格value
     * @param {Number} site 当前单元格下标
     */
    whetherVertical(key, value, site) {
      const list = this.formList; // 获取当前页所有数据
      // 如果该数据下标不为0并且与上一格相同，该单元格被合并
      if (site > 0 && list[site - 1][key] === value) {
        return [0, 0];
      }
      // 获取当前单元格合并个数，如果下一格不同，则返回1
      const num = this.getVerticalSum(key, value, list, site, 1);
      return [num, 1];
    },
    /**
     * 递归--查询合并列数量
     * @param {String} key 当前参数key
     * @param {String} value 当前参数value
     * @param {Array} list 当前查询集合
     * @param {Number} site 当前所在下标
     * @param {Number} sum 合并个数（递归增加）
     */
    getVerticalSum(key, value, list, site, sum) {
      // 是否下一项存在
      if (list[site + 1]) {
        // 判断下一项是否符合条件
        if (list[site + 1][key] === value) {
          return this.getVerticalSum(key, value, list, site + 1, sum + 1);
        } else {
          return sum;
        }
      } else {
        return sum;
      }
    },
    // 取消按钮
    cancel() {
      this.innerVisible = false;
    },
    //打开添加审核项目表单
    openCheckForm: function () {
      this.dialogStatus = "create";
      this.innerVisible = true;
    },
    submitFormOpt: function () {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          this.formList.push(this.addForm);
          this.innerVisible = false;
          this.addForm = {};
        }
      });
    },
    handleOptUpdate: function (row) {
      this.dialogStatus = "update";
      this.innerVisible = true;
    },
  },
};
</script>
<style scoped>
.el-date-editor .el-range-separator {
  width: 10%;
}

.dialogImg >>> .el-dialog__body {
  text-align: center;
  overflow: auto;
}
</style>